<template>
    <div class="wrapper">
        <el-input class="searchInput" placeholder="请输入要搜索的题目关键字" v-model="searchValue" icon="search" :focus="watchEnter()" v-on:click="search()"></el-input>
        <el-table class="table" :data="topicsPage" border>
            <el-table-column label="类型" prop="type"></el-table-column>
            <el-table-column label="标签" prop="label"></el-table-column>
            <el-table-column label="问题" prop="question"></el-table-column>
            <el-table-column label="发布人" prop="author"></el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" type="danger"  v-on:click="deleteTopicT(scope.$index, scope.row)">删除</el-button>
                    <el-button size="small" type="success" v-on:click="dialogVisible = true">加入作业</el-button>
                    <el-dialog title="提示" v-model="dialogVisible">
                        <el-form>
                            <el-form-item>
                                <el-select v-model="workId" multiple placeholder="请选择作业" size="large">
                                    <el-option
                                        v-for="item in workDoingListT" :label="item.title" :value="item.id" :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <div class="dialog-footer">
                            <el-button v-on:click="dialogVisible=false">取消</el-button>
                            <el-button type="success" v-on:click="topicToWorkT(scope.row)">确定</el-button>
                        </div>
                    </el-dialog>
                </template>
            </el-table-column>
            <el-table-column type="expand">
                <template scope="props">
                        <el-form>
                            <el-form-item v-if="props.row.type=='单选题'" label="答案：">
                                <el-radio v-model="props.row.answerValueT" label="A" :disabled=true>{{props.row.answer.A}}</el-radio>
                                <el-radio v-model="props.row.answerValueT" label="B" :disabled=true>{{props.row.answer.B}}</el-radio>
                                <el-radio v-model="props.row.answerValueT" label="C" :disabled=true>{{props.row.answer.C}}</el-radio>
                                <el-radio v-model="props.row.answerValueT" label="D" :disabled=true>{{props.row.answer.D}}</el-radio> 
                            </el-form-item>
                            <el-form-item v-if="props.row.type=='多选题'" label="答案：">
                                <el-checkbox v-model="props.row.answerValueT" label="A" :disabled=true>{{props.row.answer.A}}</el-checkbox>
                                <el-checkbox v-model="props.row.answerValueT" label="B" :disabled=true>{{props.row.answer.B}}</el-checkbox>
                                <el-checkbox v-model="props.row.answerValueT" label="C" :disabled=true>{{props.row.answer.C}}</el-checkbox>
                                <el-checkbox v-model="props.row.answerValueT" label="D" :disabled=true>{{props.row.answer.D}}</el-checkbox> 
                            </el-form-item>
                            <el-form-item v-if="props.row.type=='判断题'" label="答案：">
                                <el-radio v-model="props.row.answerValueT" label="A" :disabled=true>{{props.row.answer.A}}</el-radio>
                                <el-radio v-model="props.row.answerValueT" label="B" :disabled=true>{{props.row.answer.B}}</el-radio>
                            </el-form-item>
                            <el-form-item v-if="props.row.type =='问答题'" label="答案：">
                                <span>{{props.row.answerValueT}}</span>
                            </el-form-item>
                            <el-form-item v-if="props.row.type =='作图题'" label="答案：">
                                <img v-for="item in props.row.answerValueT" :src="item">
                            </el-form-item>
                            <el-form-item label="解释：">
                                <span>{{ props.row.answerExplain }}</span>
                            </el-form-item>
                        </el-form>
                </template>
            </el-table-column> 
        </el-table>
        <div class="block">
            <el-pagination
                :total="total"
                :page-size="pageSize"      
                layout="total, prev, pager, next"
                v-on:current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default{
        created: function() {
            this.$http({
                method: 'POST',
                url: '/api/teacher/topicT',
                headers: {
                        'Authorization': 'Bearer '+ localStorage.token
                }
            }).then( (response) => {
                if(response.data.errno == 200) {
                    this.topics = response.data.data
                    this.topicsPage = this.topics.slice(0,this.pageSize)
                }
            })

            this.$http({
                method: 'POST',
                url: '/api/teacher/indexT',
                headers: {
                    'Authorization': 'Bearer '+ localStorage.token
                }
            }).then( (response) => {
                if(response.data.errno == 200) {
                    this.id = response.data.data.id
                    this.userName = response.data.data.name
                }
                else {
                    this.$notify({
                        title: '未知错误！',
                        type: 'success',
                        offset: 100
                    })
                }         
            })

            this.$http({
                method: 'POST',
                url: '/api/teacher/workListT',
                headers: {
                    'Authorization': 'Bearer '+ localStorage.token
                }
            }).then( (response) => {
                if(response.data.errno == 200) {
                    this.workListT = response.data.data              
                }
                else {
                    this.$notify({
                        title: '未知错误！',
                        type: 'success',
                        offset: 100
                    })
                }         
            })
        },
        data: function() {
            return {
                id: '',
                userName: '',
                workListT: [],
                searchValue: '',
                topics: [],
                topicsPage: [],
                workId: [],
                dialogVisible: false,
                pageSize: 10
            }
        },
        computed: {
            total: function() {
                return this.topics.length
            },
            workDoingListT: function() {
                var workDoingListT = []
                for(var i=0; i<this.workListT.length; i++) {
                    if(this.workListT[i].status == "未发布") {
                        workDoingListT.push(this.workListT[i])
                    }                 
                }
                return workDoingListT
            }
        },
        methods: {
            watchEnter: function() {
                var self = this
                window.addEventListener('keyup',function(e) {
                    if(e.keyCode == 13) {
                        self.search()
                    }
                })
            },
            search: function() {
                this.$http({
                    method: 'POST',
                    url: '/api/teacher/queryTopicT',
                    headers: {
                        'Authorization': 'Bearer '+ localStorage.token
                    },
                    body: {
                        searchValue: this.searchValue
                    }
                }).then((response) => {
                    if(response.data.errno == 200) {
                        this.topics = response.data.data
                        this.topicsPage = this.topics.slice(0,this.pageSize)
                    }
                })
            },
            topicToWorkT: function(row) {
                if(this.workId.length>0) {
                    this.$http({
                        method: 'POST',
                        url: '/api/teacher/topicToWorkT',
                        headers: {
                             'Authorization': 'Bearer '+ localStorage.token
                        },
                        body: {
                            "topicId": row.id,
                            "workId": this.workId
                        }
                    }).then( (response) => {
                        if(response.data.errno == 200){
                            this.dialogVisible = false
                            this.$notify({
                                title: '加入成功！',
                                type: 'success',
                                offset: 100
                            })
                        }
                        else {
                            this.$notify({
                                title: '未知错误！',
                                type: 'info',
                                offset: 100
                            })
                        }
                    })
                } 
                else {
                    this.dialogVisible = false
                    this.$notify({
                        title: '请选择作业！',
                        type: 'info',
                        offset: 100
                    })
                }            
            },
            deleteTopicT: function(index,row) {
                if(row.authorId == this.id) {
                    this.$confirm('此操作将永久删除该题目，是否继续？','提示',{
                        type: 'warning'
                    }).then(() => {
                        this.$http({
                            method: 'POST',
                            url: '/api/teacher/deleteTopicT',
                            headers: {
                                'Authorization': 'Bearer '+ localStorage.token
                            },
                            body: {
                                "id": row.id
                            }
                        }).then( (response) => {
                            if(response.data.errno == 200){
                                this.topics.splice(index,1)
                                this.topicsPage.splice(index,1)
                            }
                            else {
                                this.$notify({
                                    title: '未知错误！',
                                    type: 'info',
                                    offset: 100
                                })
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消删除！'
                        })
                    })
                }
                else {
                    this.$notify({
                        title: '您没有权限删除此题！',
                        type: 'info',
                        offset: 100
                    })
                }
            },
            handleCurrentChange: function(now) {
                this.topicsPage = this.topics.slice((now-1)*this.pageSize,now*this.pageSize)
            }
        }               
    }
    
</script>

<style scoped>
    .searchInput{
        width: 1000px;
        margin: 0 auto 10px;
        position: relative;
        top: 100px;
        text-align: left;
    }
    .table{
        width: 1000px;
        margin: 0 auto 50px;
        position: relative;
        top: 100px;
        text-align: left;
    }
    img{
        width: 200px;
        height: 200px;
    }
    .block{
        position: relative;
        top: 100px;
    }
    .dialog-footer{
        text-align: right;
    }
</style>